<template>
    <div class="itemMusic">
        <ItemMusicTop :playlist='state.playlist'></ItemMusicTop>
        <ItemMusicContent :songs='state.songs' :playlist='state.playlist'></ItemMusicContent>
    </div>
</template>

<script>
import ItemMusicTop from "@/components/ItemMusic/ItemMusicTop";
import ItemMusicContent from "@/components/ItemMusic/ItemMusicContent";
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";
import { reqPlayList, reqPlayAllList} from "@/api";
export default {
   name:'ItemMusic',
   components:{
       ItemMusicTop,
       ItemMusicContent
   },
   setup() {
       const state = reactive({
           playlist:{},
           songs:[]
       })
       onMounted(async()=>{
           let id = useRoute().query.id
           let res = await reqPlayList(id)
           let result = await reqPlayAllList(id)
        //    console.log(res);
        //    console.log(result);
           state.playlist = res.playlist
           state.songs = result.songs
           sessionStorage.setItem('itemDetail',JSON.stringify(state))
       })
       return {state}
   }
}
</script>

<style lang='less'>

</style>
